<template>
    <div>
        <Form label-position="right" :label-width="90">
            <FormItem label="文章类型" style="width:250px;">
                <Select v-model="type">
                    <Option
                        v-for="item in itemType_1"
                        :value="item.value"
                        :key="item.value"
                    >{{ item.label }}</Option>
                </Select>
            </FormItem>
            <div v-if="type==1">
                <FormItem label="标题" style="width:500px;">
                    <Input type="text" v-model="fromItem_1.title" placeholder="35字内"/>
                </FormItem>
                <FormItem label="小标题" style="width:500px;">
                    <Input type="text" v-model="fromItem_1.subheading" placeholder="50字内"/>
                </FormItem>
                <FormItem label="分类" style="width:200px;">
                    <Select v-model="fromItem_1.type">
                        <Option
                            v-for="item in itemType_2"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="语言" style="width:250px;">
                    <Select v-model="fromItem_1.lang">
                        <Option
                            v-for="item in itemType_3"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </div>
            <div v-else>
                <FormItem label="标题" style="width:500px;">
                    <Input type="text" v-model="fromItem_2.title" placeholder="35字内"/>
                </FormItem>
                <FormItem label="小标题" style="width:500px;">
                    <Input type="text" v-model="fromItem_2.subheading" placeholder="50字内"/>
                </FormItem>
                <FormItem label="语言" style="width:250px;">
                    <Select v-model="fromItem_2.lang">
                        <Option
                            v-for="item in itemType_3"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="一级物种" style="width:250px;">
                    <Select v-model="fromItem_2.species_1">
                        <Option
                            v-for="item in itemType_4"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="二级物种" style="width:250px;">
                    <Select v-model="fromItem_2.species_2" filterable placeholder="首拼搜索">
                        <Option
                            v-for="item in itemType_5"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="出生天数" style="width:200px;">
                    <InputNumber type="number" v-model="fromItem_2.dayNum"></InputNumber>
                </FormItem>
            </div>
        </Form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: 1,
            fromItem_1: {
                title: '',
                subheading: '', //副标题
                type: 1,
                lang: 'zh-cn'
            },
            fromItem_2: {
                title: '',
                subheading: '', //副标题
                lang: 'zh-cn',
                species_1: 1,
                species_2: 1,
                dayNum: 0
            },
            itemType_1: [
                { label: '今日文章', value: 1 },
                { label: '成长指南文章', value: 2 }
            ],
            itemType_2: [
                { label: '今日热点', value: 1 },
                { label: '今日知识', value: 2 }
            ],
            itemType_3: [
                { label: '简体中文', value: 'zh-cn' },
            ],
            itemType_4: [
                { label: '犬', value: 1 },
                { label: '猫', value: 2 }
            ],
            itemType_5: [
                { label: '巴哥犬', value: 1 },
                { label: '边界牧羊犬', value: 2 }
            ]
        };
    },
    methods: {

    }
}
</script>
